<template>
  <div class="echarBox">
    <Echart :options="options" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
    };
  },

  mounted() {},

  methods: {
    init(data) {
      this.options = {
        title: {
          text: "请求统计", //主标题文本
          //   left: "left", // 标题距离左边位置，可以使用right
          //   top: "75px", // 标题距离底部位置，可以使用top
          textStyle: {
            // 主标题样式
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical", //竖向展示
          left: "40%",
          height: "60%", //图例容器的高度，超过会换行展示
          top: "40%",
          //   itemWidth: 10, //图标宽设置
          //   itemHeight: 10, //图标长设置
          itemGap: 24, //图标之间的距离
        },

        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            center: ["20%", "50%"],
            labelLine: {
              show: false,
            },
            label: {
              // 去除文字和箭头
              normal: {
                position: "inner",
                show: false,
              },
            },
            data: [
              {
                value: data.qqcgs,
                name: "请求成功数",
                itemStyle: {
                  color: "#1990ff", // 将图例颜色改为蓝色
                },
              },
              {
                value: data.qqsbs,
                name: "请求失败数",
                itemStyle: {
                  color: "#12c2c1", // 将图例颜色改为绿色
                },
              },
            ],
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.echarBox {
  width: 100%;
  height: 100%;
}
</style>